<template>
  <div class="main-pipeDiameterQuery">
    <div class="layui-tab layui-tab-brief" lay-filter="test-handle">
      <ul class="layui-tab-title">
        <li class="layui-this" lay-id="search">查询</li>
        <li lay-id="result">显示结果</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div style="display:flex; padding: 15px 0; border-bottom: 1px solid #fff;">
            <div class="layui-row">
              <div class="layui-col-md6">
                <div class="layui-form-item" style="margin-bottom: 0;">
                  <label class="layui-form-label">类型:</label>
                  <div class="layui-input-block">
                    <select id="guanjingSearch_layerSelect" style="width:200px; height:30px; color:black;">
                      <option style="color:#000" value="">请选择</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 0;">
                  <label class="layui-form-label">管径:</label>
                  <div class="layui-input-block">
                    <select id="conditionSelect" style="width:100px; height:30px; color:black;">
                      <option style="color:#000" value="大于">大于</option>
                      <option style="color:#000" value="小于">小于</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 0;">
                  <label class="layui-form-label">管径:</label>
                  <div class="layui-input-block">
                    <input id="valueInput" type="text" style="width:200px;" placeholder="请输入管径" class="layui-input"
                           lay-affix="number"/>
                  </div>
                </div>
              </div>
              <br/>
              <div class="layui-col-md12 layui-col-md-offset1">
                <input type="button" class="btn btn-primary" value="矩形"
                       @click="drawRectangle()"/>
                <input type="button" class="btn btn-primary" value="面" @click="drawPolygon()"/>
                <input type="button" class="btn btn-primary" value="圆" @click="drawCircle()"/>
                <input type="button" class="btn btn-primary" value="清除" @click="clearDraw()"/>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-tab-item">
          <table
              id="table"
              data-toggle="table"
              data-height="550"
              data-width="430"
              data-search="true"
              data-pagination="true"
              style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap; color:#fff;"
          >
            <thead id="thead" style="color:#fff;">

            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import clearWindow from "@/components/js/clearWindow";
import layersMap from "@/components/js/layerMap";
import fetchData from "@/components/js/fetchData";
import {highLightForPipeDiameterQuery} from "@/components/js/highLight";
// eslint-disable-next-line no-unused-vars
let from = null
let $table = null
// eslint-disable-next-line no-unused-vars
let openLayer_guanjingSearch = null
// eslint-disable-next-line no-unused-vars
let openlayerTable = null;
export default {
  name: "pipeDiameterQuery",
  components: {},
  data() {
    return {};
  },
  mounted() {
    openLayer_guanjingSearch = null;
    $table && $table.bootstrapTable('destroy')
    $table = null;
    clearWindow()
    // 初始化面板
    let html = layersMap.map(layer => {
      // return ` <option style="color:#000" value="${layer.pipelineType}">${layer.type}</option>`


      var tempTuCengM="";
      var tempTuCengLineM="";
      tempTuCengM=layer.type;
      if (tempTuCengM.includes("线")) {
        tempTuCengLineM=tempTuCengM;
        return ` <option style="color:#000" value="${layer.pipelineType}">${tempTuCengLineM}</option>`
      }
    }).join('')
    $('#guanjingSearch_layerSelect').html(html)
  },
  methods: {
    hideLayerContent() {
      this.$emit('hidden')
    },
    showLayerContent() {
      this.$emit('show')
    },
    allSelect(flag) {
      let els = $('.guanpoint-search-type')
      if (flag == 1) {
        for (let index = 0; index < els.length; index++) {
          const element = els[index];
          element.checked = true
        }
      } else if (flag == -1) {
        $('.guanpoint-search-type').attr('checked', false)
      } else { // 反选
        for (let index = 0; index < els.length; index++) {
          const element = els[index];
          element.checked = !element.checked
        }
      }
    },
    isNumber(value) {
      return !isNaN(value) && isFinite(value)
    },
    allowHandleSearch() {
      let pipeline = $('#guanjingSearch_layerSelect').val()
      let condition = $('#conditionSelect').val()
      let value = $('#valueInput').val()

      if (!pipeline || !condition || !value) {
        layui.layer.alert('请选择管线类型、条件、值！')
        return false;
      }

      if (!this.isNumber(value)) {
        layui.layer.alert('请输入数字！')
        return false;
      }
      return true;
    },
    drawPolygon() {
      let flag = this.allowHandleSearch();
      if (!flag) return;
      this.clearDraw();
      this.hideLayerContent()
      window.viewer.dadi.draw.startDraw({
        type: "polygon",
        style: {
          color: "#ffff00",
          opacity: 0.2,
          clampToGround: true,
        },
        success: () => {
          this.handleSearch()
          this.showLayerContent()
        }
      });
    },
    drawCircle() {
      let flag = this.allowHandleSearch();
      if (!flag) return;
      this.clearDraw();
      this.hideLayerContent()
      window.viewer.dadi.draw.startDraw({
        type: "circle",
        style: {
          color: "#ffff00",
          opacity: 0.2,
          clampToGround: true,
        },
        success: () => {
          this.handleSearch()
          this.showLayerContent()
        }
      });
    },
    drawRectangle() {
      let flag = this.allowHandleSearch();
      if (!flag) return;
      this.clearDraw();
      this.hideLayerContent()
      window.viewer.dadi.draw.startDraw({
        type: "rectangle",
        style: {
          color: "#ffff00",
          opacity: 0.2,
          clampToGround: true,
        },
        success: () => {
          this.handleSearch()
          this.showLayerContent()
        }
      });
    },
    clearDraw() {
      window.viewer.dadi.draw.clearDraw();
      from = null;
    },
    async handleSearch() {
      let drawGeojson = window.viewer.dadi.draw.toGeoJSON()

      // 求from
      if (drawGeojson.features[0].properties.type === 'circle') {
        from = turf.buffer(turf.feature(drawGeojson.features[0].geometry), Number(drawGeojson.features[0].properties.style.radius) / 1000, {units: 'kilometers'})
      } else if (drawGeojson.features[0].properties.type === 'polygon') {
        from = turf.feature(drawGeojson.features[0].geometry)
      } else if (drawGeojson.features[0].properties.type === 'rectangle') {
        let geo = drawGeojson.features[0].geometry.coordinates.reduce(function (a, b) {
          a.splice(-1)
          b.splice(-1)
          return a.concat(b)
        })
        from = turf.bboxPolygon(geo)
      }

      let properties = [];

      let mylayer = layersMap.find(l => l.pipelineType === $('#guanjingSearch_layerSelect').val())
      if (mylayer) {
        const r = await fetchData(mylayer.url)
        r.features.forEach(fea => {
          // 空间筛选
          let to = turf.feature(fea.geometry)
          let withIntersect = turf.booleanIntersects(to, from);
          if (withIntersect) {
            let guanjing = fea.properties['管径']
            let condition = $('#conditionSelect').val()
            let value = $('#valueInput').val()
            if (condition === '大于' && guanjing >= value) {
              properties.push({...fea.properties,})
            } else if (condition === '小于' && guanjing <= value) {
              properties.push({...fea.properties,})
            }
          }
        })

        if (properties.length === 0) {
          this.$message.warning('没有查询到符合条件的管径！')
          // layui.layer.msg('没有查询到符合条件的管径！')
          return;
        }

        refreshTable(properties)
        layui.element.tabChange('test-handle', 'result'); // 切换到：标签3
      }

      function refreshTable(tableArr) {
        $table = $('#table');
        let thead = `<tr>`
        Object.keys(tableArr[0]).forEach(key => {
          thead += `<th data-field="${key}">${key}</th>`
        })
        thead += `</tr>`
        $table.bootstrapTable('destroy')
        $('#thead').html(thead)
        $table.bootstrapTable({
          data: tableArr,
          // eslint-disable-next-line no-unused-vars
          onClickRow: function (row, $element) {
            highLightForPipeDiameterQuery(row)
          }
        })
        $table.bootstrapTable('refresh')
      }

    }
  },
  watch: {},
  computed: {},
  beforeDestroy() {
    this.clearDraw()
    clearWindow()
  },
}
</script>

<style scoped>
.main-pipeDiameterQuery {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>
<style>
.main-pipeDiameterQuery .layui-row {
  width: 100%;
}

.main-pipeDiameterQuery .layui-row > div.layui-col-md12 {
  margin-top: 20px;
}

.main-pipeDiameterQuery .layui-row > div:nth-child(1) {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-pipeDiameterQuery .layui-row > div:nth-child(1) > div {
  display: flex;
  justify-content: stretch;
}

.main-pipeDiameterQuery .layui-row > div:nth-child(1) > div > div {
  width: calc(100% - 80px);
}

.main-pipeDiameterQuery .layui-row > div:nth-child(1) > div > div > select {
  width: 100% !important;
}

#valueInput {
  background-color: transparent;
  border: 1px solid #0a6aa1;
}
</style>
